<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>   	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改</title>
<link rel="stylesheet" href="${ctx}/static/js/layui/css/layui.css">
<link rel="stylesheet" href="${ctx}/static/css/formSelects-v4.css">
<link rel="stylesheet" href="${ctx}/static/iconfont/iconfont.css">
<style type="text/css">
	.msg{
		color : red !important;
	}
</style>
</head>
<body>
	<div style="padding: 10px;">
		<form class="layui-form" action="">
			<input name="id" value="${comtype.id }" type="hidden">
			<div class="layui-form-item">
				<label class="layui-form-label">类别名称</label>
				<div class="layui-input-inline">
					<input type="text" name="name" required value="${comtype.name }"
						lay-verify="required" placeholder="名称" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux msg"></div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">图标</label>
				<div class="layui-input-inline">
					<input type="text" name="img" id="icon" placeholder="请输入图标" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">
					<span id="iconfont" class="iconfont "></span>
				</div>
			</div>
			<div class="hp-form-item" style="display: none" id="icon_div">
				<c:forEach items="${iconfonts }" var="iconfont" >
					<span style="height: 25px;display: inline-block; cursor:pointer" class="icon_span">
						<i class="iconfont ${iconfont}"></i>
						<input type="radio" name="productTypeIcon" value="${iconfont}" style="cursor:pointer">
					</span>
				</c:forEach>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">序号</label>
				<div class="layui-input-inline">
					<input type="text" name="seq" required value="${comtype.seq }"
						lay-verify="required" placeholder="请输入序号" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<script src="${ctx}/static/js/layui/layui.js"></script>
		<script>
		layui.config({
	        base: '${ctx}/static/js/' //此处路径请自行处理, 可以使用绝对路径
	    }).extend({
	        formSelects: 'formSelects-v4.min'
	    });
		layui.use(['form', 'upload', 'formSelects'], function(){
		  	var form = layui.form;
		  	var upload = layui.upload;
		  	var $ = layui.$;
		  	var formSelects = layui.formSelects;
		  
			//监听提交
			form.on('submit(formDemo)', function(data) {
				//$.post一般来说需要3个参数：url，参数，回调函数
				$.post('${ctx}/comtype/update', data.field , function (e){
					if (e == "") {
						parent.layui.table.reload("demo");
						parent.layer.msg('修改成功', {icon: 1});		//高用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.layer.close(index); //再执行关闭 
					} else {
						alert("失败");
					}
				})
				return false;
			});

			//光标离开后，去查询用户名是否存在
			$('input[name="name"]').blur(function() {
				var v = $(this).val();
				//Ajax请求
				$.ajax({
					url : '${ctx}/comtype/isExist', //地址
					data : { //data是参数
						name : v
					},
					success : function(e) { //成功后的回调函数
						if (e == "") {
							$('.msg').text("");
						} else {
							$('.msg').text(e);
							$('input[name="name"]').focus();
						}
					},
					error : function(xhr, status, error) { //失败后的回调函数
						console.log("失败：" + xhr);
					}
				})
			})
			
			
			
			//点击图标选中
			$('span.icon_span').on('click', function (){
				console.log(this);
				$(this).children("input").prop("checked", true);
				var iconfont = $('input[name="productTypeIcon"]:checked').val();
				$('#icon').val(iconfont);
				$('#iconfont').attr("class", "iconfont " + iconfont);
				$('.icon_span').css("background-color", "");
				$('.icon_span').css("color", "");
				$(this).css("background-color", "#009688");
				$(this).css("color", "white");
				$('#icon_div').hide();
			})

			//点击输入框显示图标选择
			$('#icon').on('click', function (){
				$('#icon_div').show();
			})
			
		});
		</script>
	</div>
</body>
</html>